<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网数据获取学生评价系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1, h2 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 20px;
        }
        .evaluation-form, .result-container, .summary-container {
            background-color: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #3498db;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .score-options {
            display: flex;
            justify-content: space-between;
            width: 150px;
        }
        .score-option {
            width: 25px;
            text-align: center;
        }
        .student-info {
            display: flex;
            margin-bottom: 20px;
        }
        .student-info div {
            margin-right: 20px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
            margin-right: 10px;
        }
        button:hover {
            background-color: #2980b9;
        }
        .score-bar {
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        .score-fill {
            height: 100%;
            background-color: #3498db;
            border-radius: 10px;
        }
        .final-score {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            text-align: center;
            margin: 20px 0;
        }
        .feedback {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
        }
        .good {
            background-color: #d4edda;
            color: #155724;
        }
        .average {
            background-color: #fff3cd;
            color: #856404;
        }
        .poor {
            background-color: #f8d7da;
            color: #721c24;
        }
        .tab-buttons {
            display: flex;
            margin-bottom: 15px;
        }
        .tab-button {
            padding: 10px 20px;
            background-color: #eee;
            border: none;
            cursor: pointer;
            margin-right: 5px;
        }
        .tab-button.active {
            background-color: #3498db;
            color: white;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .summary-table th {
            position: sticky;
            top: 0;
        }
        .summary-container {
            max-height: 500px;
            overflow-y: auto;
        }
        .save-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            display: none;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="save-notification" id="save-notification">评价已自动保存！</div>
    
    <h1>物联网数据获取学生评价系统</h1>
    
    <div class="tab-buttons">
        <button class="tab-button active" onclick="openTab('evaluation')">学生评价</button>
        <button class="tab-button" onclick="openTab('summary')">全班汇总</button>
    </div>
    
    <div id="evaluation" class="tab-content active">
        <div class="evaluation-form">
            <div class="student-info">
                <div>
                    <label for="group-number">第几组：</label>
                    <input type="text" id="group-number" required>
                </div>
                <div>
                    <label for="student-name">学生姓名：</label>
                    <input type="text" id="student-name" required>
                </div>
            </div>
            
            <table>
                <thead>
                    <tr>
                        <th>评价维度</th>
                        <th>评价指标</th>
                        <th>评分</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td rowspan="3">知识掌握</td>
                        <td>理解物联网基本概念及数据获取流程（传感器→传输→处理）</td>
                        <td>
                            <div class="score-options">
                                <label class="score-option"><input type="radio" name="knowledge1" value="1">1</label>
                                <label class="score-option"><input type="radio" name="knowledge1" value="3">3</label>
                                <label class="score-option"><input type="radio" name="knowledge1" value="5">5</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>认识常见传感器类型及作用（如温湿度、光照传感器）</td>
                        <td>
                            <div class="score-options">
                                <label class="score-option"><input type="radio" name="knowledge2" value="1">1</label>
                                <label class="score-option"><input type="radio" name="knowledge2" value="3">3</label>
                                <label class="score-option"><input type="radio" name="knowledge2" value="5">5</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>了解物联网数据获取方式与传输流程（获取→发送→接收）</td>
                        <td>
                            <div class="score-options">
                                <label class="score-option"><input type="radio" name="knowledge3" value="1">1</label>
                                <label class="score-option"><input type="radio" name="knowledge3" value="3">3</label>
                                <label class="score-option"><input type="radio" name="knowledge3" value="5">5</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">能力表现</td>
                        <td>通过角色扮演/模拟实验完成数据传输任务</td>
                        <td>
                            <div class="score-options">
                                <label class="score-option"><input type="radio" name="ability1" value="1">1</label>
                                <label class="score-option"><input type="radio" name="ability1" value="3">3</label>
                                <label class="score-option"><input type="radio" name="ability1" value="5">5</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>能结合生活场景描述物联网数据流动原理</td>
                        <td>
                            <div class="score-options">
                                <label class="score-option"><input type="radio" name="ability2" value="1">1</label>
                                <label class="score-option"><input type="radio" name="ability2" value="3">3</label>
                                <label class="score-option"><input type="radio" name="ability2" value="5">5</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">情感态度</td>
                        <td>理解"万物互联"原理，表达对物联网应用价值的感受</td>
                        <td>
                            <div class="score-options">
                                <label class="score-option"><input type="radio" name="attitude1" value="1">1</label>
                                <label class="score-option"><input type="radio" name="attitude1" value="3">3</label>
                                <label class="score-option"><input type="radio" name="attitude1" value="5">5</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>具有创新的自信心，有用科技守护他人、改善社会的使命感</td>
                        <td>
                            <div class="score-options">
                                <label class="score-option"><input type="radio" name="attitude2" value="1">1</label>
                                <label class="score-option"><input type="radio" name="attitude2" value="3">3</label>
                                <label class="score-option"><input type="radio" name="attitude2" value="5">5</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">实践操作</td>
                        <td>能用软件模拟（如Linkboy）数据传输</td>
                        <td>
                            <div class="score-options">
                                <label class="score-option"><input type="radio" name="practice1" value="1">1</label>
                                <label class="score-option"><input type="radio" name="practice1" value="3">3</label>
                                <label class="score-option"><input type="radio" name="practice1" value="5">5</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>通过具象化活动理解抽象的数据传输过程</td>
                        <td>
                            <div class="score-options">
                                <label class="score-option"><input type="radio" name="practice2" value="1">1</label>
                                <label class="score-option"><input type="radio" name="practice2" value="3">3</label>
                                <label class="score-option"><input type="radio" name="practice2" value="5">5</label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <button id="calculate-btn">计算总分</button>
        </div>
        
        <div class="result-container" id="result-container">
            <h2>评价结果</h2>
            <p><strong>第几组：</strong><span id="result-group"></span></p>
            <p><strong>学生姓名：</strong><span id="result-name"></span></p>
            
            <div class="final-score">
                总分：<span id="total-score">0</span>/45
            </div>
            
            <div class="score-bar">
                <div class="score-fill" id="score-fill" style="width: 0%"></div>
            </div>
            
            <div id="feedback" class="feedback"></div>
            
            <h3>各维度得分：</h3>
            <p><strong>知识掌握：</strong><span id="knowledge-score">0</span>/15</p>
            <p><strong>能力表现：</strong><span id="ability-score">0</span>/10</p>
            <p><strong>情感态度：</strong><span id="attitude-score">0</span>/10</p>
            <p><strong>实践操作：</strong><span id="practice-score">0</span>/10</p>
        </div>
    </div>
    
    <div id="summary" class="tab-content">
        <div class="summary-container">
            <h2>全班评价汇总</h2>
            <button id="export-btn">导出数据</button>
            <button id="clear-data-btn">清空所有数据</button>
            <table class="summary-table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>组别</th>
                        <th>姓名</th>
                        <th>知识掌握</th>
                        <th>能力表现</th>
                        <th>情感态度</th>
                        <th>实践操作</th>
                        <th>总分</th>
                        <th>评价</th>
                    </tr>
                </thead>
                <tbody id="summary-data">
                    <!-- 数据将通过JavaScript动态填充 -->
                </tbody>
            </table>
        </div>
    </div>
    
    <script>
        // 存储所有学生评价数据
        let allEvaluations = [];
        
        // 初始化时尝试从本地存储加载数据
        if (localStorage.getItem('evaluations')) {
            allEvaluations = JSON.parse(localStorage.getItem('evaluations'));
        }
        
        // 标签页切换功能
        function openTab(tabName) {
            const tabContents = document.getElementsByClassName('tab-content');
            for (let i = 0; i < tabContents.length; i++) {
                tabContents[i].classList.remove('active');
            }
            
            const tabButtons = document.getElementsByClassName('tab-button');
            for (let i = 0; i < tabButtons.length; i++) {
                tabButtons[i].classList.remove('active');
            }
            
            document.getElementById(tabName).classList.add('active');
            event.currentTarget.classList.add('active');
            
            if (tabName === 'summary') {
                updateSummaryTable();
            }
        }
        
        // 显示保存通知
        function showSaveNotification() {
            const notification = document.getElementById('save-notification');
            notification.style.display = 'block';
            setTimeout(() => {
                notification.style.display = 'none';
            }, 3000);
        }
        
        // 计算总分并自动保存
        document.getElementById('calculate-btn').addEventListener('click', function() {
            // 验证是否所有项目都已评分
            const radios = document.querySelectorAll('input[type="radio"]:checked');
            if (radios.length !== 9) {
                alert('请完成所有项目的评分！');
                return;
            }
            
            // 验证学生信息
            const groupNumber = document.getElementById('group-number').value;
            const studentName = document.getElementById('student-name').value;
            
            if (!groupNumber || !studentName) {
                alert('请填写完整的组别和学生信息！');
                return;
            }
            
            // 计算各维度分数
            let knowledgeScore = 0;
            knowledgeScore += parseInt(document.querySelector('input[name="knowledge1"]:checked').value);
            knowledgeScore += parseInt(document.querySelector('input[name="knowledge2"]:checked').value);
            knowledgeScore += parseInt(document.querySelector('input[name="knowledge3"]:checked').value);
            
            let abilityScore = 0;
            abilityScore += parseInt(document.querySelector('input[name="ability1"]:checked').value);
            abilityScore += parseInt(document.querySelector('input[name="ability2"]:checked').value);
            
            let attitudeScore = 0;
            attitudeScore += parseInt(document.querySelector('input[name="attitude1"]:checked').value);
            attitudeScore += parseInt(document.querySelector('input[name="attitude2"]:checked').value);
            
            let practiceScore = 0;
            practiceScore += parseInt(document.querySelector('input[name="practice1"]:checked').value);
            practiceScore += parseInt(document.querySelector('input[name="practice2"]:checked').value);
            
            const totalScore = knowledgeScore + abilityScore + attitudeScore + practiceScore;
            
            // 显示结果
            document.getElementById('result-group').textContent = groupNumber;
            document.getElementById('result-name').textContent = studentName;
            
            document.getElementById('knowledge-score').textContent = knowledgeScore;
            document.getElementById('ability-score').textContent = abilityScore;
            document.getElementById('attitude-score').textContent = attitudeScore;
            document.getElementById('practice-score').textContent = practiceScore;
            
            document.getElementById('total-score').textContent = totalScore;
            document.getElementById('score-fill').style.width = (totalScore / 45 * 100) + '%';
            
            // 提供反馈
            const feedbackElement = document.getElementById('feedback');
            feedbackElement.className = 'feedback';
            
            let feedbackText = '';
            if (totalScore >= 36) {  // 80% of 45
                feedbackText = '优秀！该学生对物联网数据获取有深入理解，并能将知识应用于实践。';
                feedbackElement.classList.add('good');
            } else if (totalScore >= 27) {  // 60% of 45
                feedbackText = '良好。该学生掌握了基本概念，但在某些方面还需加强。';
                feedbackElement.classList.add('average');
            } else {
                feedbackText = '需要加强。建议该学生在知识理解和实践操作方面多下功夫。';
                feedbackElement.classList.add('poor');
            }
            feedbackElement.textContent = feedbackText;
            
            // 显示结果区域
            document.getElementById('result-container').style.display = 'block';
            
            // 自动保存评价
            const evaluation = {
                id: Date.now(),
                group: groupNumber,
                name: studentName,
                knowledge: knowledgeScore,
                ability: abilityScore,
                attitude: attitudeScore,
                practice: practiceScore,
                total: totalScore,
                feedback: feedbackText,
                timestamp: new Date().toLocaleString()
            };
            
            // 检查是否已存在相同组别和姓名的评价
            const existingIndex = allEvaluations.findIndex(
                item => item.group === groupNumber && item.name === studentName
            );
            
            if (existingIndex !== -1) {
                // 更新现有评价
                allEvaluations[existingIndex] = evaluation;
            } else {
                // 添加新评价
                allEvaluations.push(evaluation);
            }
            
            // 保存到本地存储
            localStorage.setItem('evaluations', JSON.stringify(allEvaluations));
            
            // 显示保存通知
            showSaveNotification();
            
            // 更新汇总表格
            updateSummaryTable();
        });
        
        // 更新全班汇总表格
        function updateSummaryTable() {
            const summaryTable = document.getElementById('summary-data');
            summaryTable.innerHTML = '';
            
            if (allEvaluations.length === 0) {
                summaryTable.innerHTML = '<tr><td colspan="9" style="text-align:center;">暂无评价数据</td></tr>';
                return;
            }
            
            // 按总分排序
            const sortedEvaluations = [...allEvaluations].sort((a, b) => b.total - a.total);
            
            sortedEvaluations.forEach((eval, index) => {
                const row = document.createElement('tr');
                
                // 根据分数设置行样式
                if (eval.total >= 36) {
                    row.classList.add('good');
                } else if (eval.total >= 27) {
                    row.classList.add('average');
                } else {
                    row.classList.add('poor');
                }
                
                row.innerHTML = `
                    <td>${index + 1}</td>
                    <td>${eval.group}</td>
                    <td>${eval.name}</td>
                    <td>${eval.knowledge}/15</td>
                    <td>${eval.ability}/10</td>
                    <td>${eval.attitude}/10</td>
                    <td>${eval.practice}/10</td>
                    <td>${eval.total}/45</td>
                    <td>${eval.feedback}</td>
                `;
                
                summaryTable.appendChild(row);
            });
        }
        
        // 导出数据
        document.getElementById('export-btn').addEventListener('click', function() {
            if (allEvaluations.length === 0) {
                alert('没有可导出的数据！');
                return;
            }
            
            // 创建CSV内容
            let csvContent = "序号,组别,姓名,知识掌握,能力表现,情感态度,实践操作,总分,评价\n";
            
            // 按总分排序
            const sortedEvaluations = [...allEvaluations].sort((a, b) => b.total - a.total);
            
            sortedEvaluations.forEach((eval, index) => {
                csvContent += `${index + 1},${eval.group},${eval.name},${eval.knowledge}/15,${eval.ability}/10,${eval.attitude}/10,${eval.practice}/10,${eval.total}/45,"${eval.feedback}"\n`;
            });
            
            // 创建下载链接
            const blob = new Blob(["\uFEFF" + csvContent], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.setAttribute('href', url);
            link.setAttribute('download', `物联网评价汇总_${new Date().toLocaleDateString()}.csv`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
        
        // 清空所有数据
        document.getElementById('clear-data-btn').addEventListener('click', function() {
            if (confirm('确定要清空所有评价数据吗？此操作不可恢复！')) {
                localStorage.removeItem('evaluations');
                allEvaluations = [];
                updateSummaryTable();
                alert('所有数据已清空！');
            }
        });
        
        // 初始化时更新汇总表格
        updateSummaryTable();
    </script>
</body>
</html>